<a href="{url}" class="colab-root">
  Reproduce in a <span>Notebook</span>
</a>


<style>
.colab-root {
  display: inline-block;
  background: rgba(255, 255, 255, 0.75);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px!important;
  text-decoration: none;
  color: #aaa;
  border: none;
  font-weight: 300;
  border: solid 1px rgba(0, 0, 0, 0.08);
  border-bottom-color: rgba(0, 0, 0, 0.15);
  text-transform: uppercase;
  line-height: 16px;
}
span {
  background-image: url(images/colab.svg);
  background-repeat: no-repeat;
  background-size: 20px;
  background-position-y: 2px;
  display: inline-block;
  padding-left: 24px;
  border-radius: 4px;
  text-decoration: none;
}
a:hover{
  color: #666;
  background: white;
  border-color: rgba(0, 0, 0, 0.2);
}
</style>


<script>
export default {
  oncreate() {
    const { url } = this.get();
    if (typeof url == "undefined") {
      console.error("<ColabLink> was instantiated without a URL!")
    }
  }
}
</script>
